<template>
	<div class="mainua">
		<div class="main_spac1" style="padding-bottom:5px;">
			<div class="main_white padding10">
				<div class="main_crumbs boxdq">
					<div class="main_crumbs_l">
						<a href="javascript:;" @click="$router.back(-1)">
							<i class="el-icon-arrow-down"></i>返回
						</a>
						<em>|</em>
						<span>编辑商品</span>
					</div>
				</div>
				<div class="main_tile boxdq marginTop10">
					<div class="main_tile_l">
						<em></em>基本信息
					</div>
				</div>
				<div class="maincla_form">
					<el-form
						:inline="true"
						:rules="rules"
						:model="monitorForm"
						class="demo-form-inline"
						ref="userListFrom"
						label-width="110px"
					>
						<div>
							<el-form-item label="商品名称：" prop="form.name" :rules="rules.name">
								<el-input
									v-model.trim="monitorForm.form.name"
									placeholder="商品名称"
									clearable
									:disabled="monitorForm.form.standard_goods_id>0?true:false"
									class="wid240"
									@input="inputName"
								></el-input>
							</el-form-item>
							<el-form-item
								label="商品分类："
								prop="form.category_id"
								:rules="rules.category_id"
								label-width="180px"
							>
								<el-cascader
									v-model="monitorForm.form.category_id"
									:options="options"
									:disabled="monitorForm.form.standard_goods_id>0?true:false"
									:props="defaultProps"
									class="wid240"
								></el-cascader>
							</el-form-item>
							<div class="clearfix"></div>
							<el-form-item label="商品别名：" prop="form.byname">
								<el-input
									v-model.trim="monitorForm.form.byname"
									maxlength="20"
									placeholder="商品别名"
									show-word-limit
									class="wid150 main_limit"
								></el-input>
								<el-checkbox v-model="monitorForm.form.use_byname" style="margin-left:7px;">使用别名</el-checkbox>
							</el-form-item>
							<el-form-item
								label="关键词："
								prop="form.pinyin"
								label-width="180px"
								:rules="rules.pinyin"
							>
								<el-input
									v-model.trim="monitorForm.form.pinyin"
									placeholder="默认拼音码"
									clearable
									class="wid240"
								></el-input>
							</el-form-item>
							<div class="clearfix"></div>
							<el-form-item label="排序：" prop="form.sort">
								<el-input
									v-model.trim="monitorForm.form.sort"
									placeholder="排序"
									clearable
									class="wid240"
								></el-input>
							</el-form-item>
							<el-form-item
								label="商品品牌："
								prop="form.brand"
								label-width="180px"
								:rules="rules.brand"
							>
								<el-select v-model.trim="monitorForm.form.brand" placeholder="商品品牌" class="wid240">
									<el-option
										v-for="(brand,index) in info.brand"
										:key="index"
										:label="brand.title"
										:value="brand.id"
									></el-option>
								</el-select>
							</el-form-item>
							<div class="clearfix"></div>
							<el-form-item label="采购类型：" prop="type">
								<div class="boxnr">
									<div class="maincla_lea">
										<span :class="{on:monitorForm.form.purchase_relation.purchase_type==1}" @click="monitorForm.form.purchase_relation.purchase_type=1,monitorForm.form.purchase_relation.supply_id=''">自采</span>
										<span :class="{on:monitorForm.form.purchase_relation.purchase_type==2}" @click="monitorForm.form.purchase_relation.purchase_type=2,monitorForm.form.purchase_relation.buyer_id=''">供应商</span>
									</div>
									<el-checkbox v-model.trim="monitorForm.form.specify" class="marginLeft20" style="margin-right:0;" >临时指定</el-checkbox>
								</div>
							</el-form-item>
							<el-form-item label="默认采购员" prop="form.purchase_relation.buyer_id" label-width="180px" v-if="monitorForm.form.purchase_relation.purchase_type==1" :rules="rules.buyer_id">
								<el-select v-model.trim="monitorForm.form.purchase_relation.buyer_id" placeholder="默认采购员" class="wid240">
									<el-option
										v-for="(buyer,index) in info.buyer"
										:key="index"
										:label="buyer"
										:value="parseInt(index)"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="默认供应商" prop="form.purchase_relation.supply_id" label-width="280px" v-if="monitorForm.form.purchase_relation.purchase_type==2" :rules="rules.supply_id">
								<el-select v-model.trim="monitorForm.form.purchase_relation.supply_id" placeholder="默认供应商" class="wid240">
									<el-option
										v-for="(supplier,index) in info.supplier"
										:key="index"
										:label="supplier"
										:value="parseInt(index)"
									></el-option>
								</el-select>
							</el-form-item>
							<div class="clearfix"></div>
							<el-form-item label="编码(SPU)：" prop="form.goods_code" :rules="rules.goods_code">
								<div class="box">
									<el-input
										v-model.trim="monitorForm.form.goods_code"
										placeholder="编码"
										clearable
										:disabled="monitorForm.form.use_code[0]==1?true:false"
										class="wid240"
									></el-input>
									<el-checkbox-group
										v-model="monitorForm.form.use_code"
										v-if="monitorForm.form.standard_goods_id>0"
									>
										<el-checkbox
											:label="1"
											class="marginLeft20"
											@change="checkboxGroup(1),monitorForm.form.goods_code=monitorForm.form.standard_code"
											style="margin-right:0;"
										>使用标准编码</el-checkbox>
										<el-checkbox
											:label="0"
											class="marginLeft20"
											@change="checkboxGroup(0),monitorForm.form.goods_code=''"
											style="margin-right:0;"
										>使用自定义编码</el-checkbox>
									</el-checkbox-group>
								</div>
							</el-form-item>
							<div class="clearfix"></div>
							<el-form-item label="商品描述：" prop="form.describe" class="maincla_te">
								<el-input type="textarea" placeholder="请输入商品描述" v-model="monitorForm.form.describe"></el-input>
							</el-form-item>
							<div class="box">
								<el-form-item label="上架状态：" prop="form.status">
									<el-switch
										v-model="monitorForm.form.status"
										active-color="#03A98E"
										active-text="开"
										inactive-text="关"
										class="mainor_switch"
									></el-switch>
								</el-form-item>
								<el-form-item label="首页推荐：" prop="form.is_recommend" label-width="100px">
									<el-switch
										v-model="monitorForm.form.is_recommend"
										active-color="#03A98E"
										active-text="开"
										inactive-text="关"
										class="mainor_switch"
									></el-switch>
								</el-form-item>
								<el-form-item label="标品：" prop="form.is_standard" label-width="70px">
									<el-switch
										v-model="monitorForm.form.is_standard"
										active-color="#03A98E"
										active-text="开"
										inactive-text="关"
										class="mainor_switch"
									></el-switch>
								</el-form-item>
							</div>
							<el-form-item label="商品标签：" prop="form.label_ids" class="label_ids boxha">
								<el-checkbox-group v-model="monitorForm.form.label_ids">
									<el-checkbox
										v-for="(tag,index) in info.tag"
										:key="index"
										:label="tag.id"
									>{{ tag.title }}</el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</div>
						<div class="main_tile boxdq">
							<div class="main_tile_l">
								<em></em>商品主图及详情
								<span>建议图片尺寸是:302*302，最多三张，主图为默认第一张</span>
							</div>
						</div>
						<div class="marginTop20 marginLeft10 main_upImg">
							<el-upload
								:action="uploadPath"
								list-type="picture-card"
								:before-remove="beforeRemove"
								:on-success="handSuccess"
								:on-preview="handlePictureCardPreview"
								:on-remove="handleRemove"
								:limit="3"
								:file-list="filelist"
							>
								<span slot="default">
									<svg aria-hidden="true" class="main_page_svg" width="32" height="27">
										<use xlink:href="#icon-commodit_camera" />
									</svg>
								</span>
							</el-upload>
							<el-dialog :visible.sync="dialogVisible">
								<img :src="dialogImageUrl" alt />
							</el-dialog>
							<div class="clearfix"></div>
						</div>
						<div class="clearfix"></div>
						<div class="maincla_ed">
							<Editor
								api-key="vl7byj8kh7hyvvi6o7137s7khcpfsp762987dlnbcd93u37a"
								v-model="monitorForm.form.detail"
								:init="init"
							></Editor>
						</div>
						<div class="main_tile box marginTop20">
							<div class="main_tile_l">
								<em></em>SKU设置
							</div>
							<div class="maincla_ra" v-if="monitorForm.form.standard_goods_id>0?false:true">
								<el-radio-group
									v-model="monitorForm.form.transfer"
									:border="true"
									@change="radioGrou"
								>
									<el-radio :label="1">可互调</el-radio>
									<el-radio :label="0">不可互调</el-radio>
								</el-radio-group>
							</div>
						</div>

						<div class="main_table row-expand-down">
							<el-table
								ref="multipleTable"
								:data="monitorForm.list"
								element-loading-text="加载中"
								fit
								highlight-current-row
							>
								<el-table-column type="expand" width="1">
									<template slot-scope="props">
										<div class="maincla_zh box">
											<span>1{{ props.row.unit | unit(info) }}约</span>
											<el-form-item
												:prop="'list.' + props.$index + '.transfer_num'"
												:rules="rules.transfer_num"
												label-width="10px"
												label=" "
											>
												<el-input
													v-model.trim="props.row.transfer_num"
													placeholder
													clearable
													class="wid110"
												></el-input>
											</el-form-item>
											<el-form-item
												:prop="'list.' + props.$index + '.transfer_unit'"
												:rules="rules.transfer_unit"
												label-width="10px"
												label=" "
												style="margin-left:5px;"
											>
												<el-select
													v-model.trim="props.row.transfer_unit"
													placeholder="规格"
													class="wid110"
												>
													<el-option
														v-for="(unit,index) in info.unit"
														:key="index"
														:label="unit.title"
														:value="unit.id"
													></el-option>
												</el-select>
											</el-form-item>
											<p @click="toogleExpand_qx(props.row,props.$index)">取消转换</p>
										</div>
									</template>
								</el-table-column>

								<el-table-column
									label="属性"
									prop="spu_name"
									class-name="main_hei"
									width="360"
									align="center"
								>
									<template slot-scope="scope">
										<div class="maincla_sx boxnr">
											<div class="maincla_sxf">
												<svg
													aria-hidden="true"
													class="main_page_svg"
													width="15"
													height="15"
													@click="plus"
												>
													<use xlink:href="#icon-commodity_plus" />
												</svg>
												<svg
													aria-hidden="true"
													class="main_page_svg"
													width="22"
													height="22"
													v-if="scope.$index!=0"
													@click="scope.row.id?reduce(scope.$index,2):reduce(scope.$index)"
												>
													<use xlink:href="#icon-commodity_reduce" />
												</svg>
											</div>
											<span
												class="maincla_sxs"
											>{{ monitorForm.form.transfer==1?(scope.$index==0?'基础':''):'' }}</span>
											<el-form-item
												:prop="'list.' + scope.$index + '.spu_name'"
												:rules="rules.spu_name"
												label=" "
												label-width="10px"
											>
												<el-select
													v-model.trim="scope.row.spu_name"
													placeholder="属性"
													class="wid140"
													:disabled="scope.row.standard_spu_id>0?true:false"
													v-if="monitorForm.form.transfer==0"
												>
													<el-option
														v-for="(attribute,index) in info.attribute"
														:key="index"
														:label="attribute.title"
														:value="attribute.id"
													></el-option>
												</el-select>
												<el-select
													v-model.trim="scope.row.spu_name"
													placeholder="属性"
													class="wid140"
													:disabled="scope.row.standard_spu_id>0?true:false"
													v-if="monitorForm.form.transfer==1"
													@change="scope.row.unit=scope.row.spu_name"
												>
													<el-option
														v-for="(unit,index) in info.unit"
														:key="index"
														:label="unit.title"
														:value="unit.id"
													></el-option>
												</el-select>
											</el-form-item>
										</div>
									</template>
								</el-table-column>
								<el-table-column label="单位" prop="unit" class-name="main_hei" width="200">
									<template slot-scope="scope">
										<div class="maincla_dw boxnr">
											<div class="maincla_dwp boxnr">
												<div
													v-if="monitorForm.form.transfer==1"
													class="maincla_dwp_un"
												>{{ scope.row.unit | unit(info) }}</div>
												<el-form-item
													:prop="'list.' + scope.$index + '.unit'"
													:rules="rules.unit"
													label-width="10px"
													label=" "
													v-if="monitorForm.form.transfer==0"
												>
													<el-select
														v-model.trim="scope.row.unit"
														placeholder="单位"
														class="wid110"
														:disabled="scope.row.standard_spu_id>0?true:false"
													>
														<el-option
															v-for="(unit,index) in info.unit"
															:key="index"
															:label="unit.title"
															:value="unit.id"
														></el-option>
													</el-select>
												</el-form-item>
												<strong @click="toogleExpand(scope.row,scope.$index)">配送转换</strong>
											</div>
											<p>
												<el-tooltip
													class="item"
													effect="dark"
													content="示例：1只鸡约1.5斤"
													placement="top"
												>
													<i class="el-icon-question"></i>
												</el-tooltip>
											</p>
										</div>
									</template>
								</el-table-column>
								<el-table-column
									label="互调比"
									prop="package_num"
									:class-name="monitorForm.form.transfer==1?'main_hei':''"
									width="180"
								>
									<template slot-scope="scope">
										<div class="maincla_bz">
											<span v-if="monitorForm.form.transfer==0">{{ scope.row.package_num }}</span>
											<div class="boxnr" v-else>
												<el-form-item
													:prop="'list.' + scope.$index + '.package_num'"
													:rules="rules.package_num"
													label-width="10px"
													label=" "
												>
													<el-input
														v-model.trim="scope.row.package_num"
														placeholder="互调比"
														clearable
														class="wid110"
													></el-input>
												</el-form-item>
												<span class="marginLeft5">{{ monitorForm.list[0].unit | unit(info) }}</span>
											</div>
										</div>
									</template>
								</el-table-column>
								<el-table-column
									label="编码sku"
									prop="goods_spu_code"
									class-name="main_hei"
									width="180"
								>
									<template slot-scope="scope">
										<el-form-item
											:prop="'list.' + scope.$index + '.goods_spu_code'"
											:rules="rules.goods_spu_code"
											label-width="10px"
											label=" "
										>
											<el-input
												v-model.trim="scope.row.goods_spu_code"
												placeholder="条码"
												clearable
												class="wid110"
											></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column
									label="采购价"
									prop="purchase_price"
									class-name="main_hei"
									:render-header="renderHeader"
									width="180"
								>
									<template slot-scope="scope">
										<el-form-item
											:prop="'list.' + scope.$index + '.purchase_price'"
											:rules="rules.purchase_price"
											label-width="10px"
											label=" "
										>
											<el-input
												v-model.trim="scope.row.purchase_price"
												placeholder="采购价"
												clearable
												class="wid110"
											></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="市场价" prop="market_price" class-name="main_hei" width="180">
									<template slot-scope="scope">
										<el-form-item
											:prop="'list.' + scope.$index + '.market_price'"
											:rules="rules.market_price"
											label-width="10px"
											label=" "
										>
											<el-input
												v-model.trim="scope.row.market_price"
												placeholder="市场价"
												clearable
												class="wid110"
											></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column label="起订量" prop="minimum" class-name="main_hei" width="180">
									<template slot-scope="scope">
										<el-form-item
											:prop="'list.' + scope.$index + '.minimum'"
											:rules="rules.minimum"
											label-width="10px"
											label=" "
										>
											<el-input
												v-model.trim="scope.row.minimum"
												placeholder="起订量"
												clearable
												class="wid110"
											></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column
									label="损耗率"
									prop="attrition_rate"
									class-name="main_hei"
									:render-header="renderHeader1"
									width="180"
								>
									<template slot-scope="scope">
										<el-form-item
											:prop="'list.' + scope.$index + '.attrition_rate'"
											:rules="rules.attrition_rate"
											label-width="10px"
											label=" "
										>
											<el-input
												v-model.trim="scope.row.attrition_rate"
												placeholder="损耗率"
												clearable
												class="wid110"
											></el-input>
										</el-form-item>
									</template>
								</el-table-column>
								<el-table-column
									label="状态"
									align="center"
									fixed="right"
									width="100"
									class-name="main_hei"
								>
									<template slot-scope="scope">
										<el-switch
											v-model="scope.row.status"
											active-color="#03A98E"
											active-text="开"
											inactive-text="关"
											class="mainor_switch"
										></el-switch>
									</template>
								</el-table-column>
							</el-table>
						</div>

						<div class="clearfix"></div>
						<div class="newConBox_p200 paddingBottom10" id="newConBox">
							<div class="newConBox_h32">
								<div :class="['boxdq newConBox ',{on:searchBarFixed}]">
									<div class="mainor_prl">
										<el-button type="primary" @click="preservation(1)" v-repeatClick>保存并继续修改</el-button>
										<el-button
											class="reset marginLeft10"
											v-repeatClick
											type="info"
											@click="preservation(2)"
										>保存并返回列表</el-button>
									</div>
								</div>
							</div>
						</div>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
import init from "./init";
import { uploadPath, images_delete } from "@/api/currency";
import {
	goods_base,
	goods_edit,
	goods_info,
	goods_delete,
	goods_check,
} from "@/api/commodity/commodityList";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { recursion, category } from "@/utils/index";
import vPinyin from "@/utils/pinyin-py";
import rules from "@/rules/commodity/commodity_List_add";

const shuju = {
	list: {
		base: 1,
		spu_name: "",
		unit: "",
		package_num: 1,
		transfer_unit: "",
		transfer_num: 0,
		is_float: true,
		standard_spu_id: 0,
		standard_spu_code: "",
		down: false,
		goods_spu_code: "",
		market_price: "",
		purchase_price: "",
		minimum: "",
		attrition_rate: "",
		status: true,
	},
	form: {
		name: "",
		byname: "",
		category_id: [],
		pid: "",
		pinyin: "",
		goods_code: "",
		brand: "",
		pics: [],
		pic: "",
		sort: 0,
		describe: "",
		use_byname: false,
		use_code: [0],
		standard_goods_id: 0,
		standard_code: "",
		status: true,
		is_recommend: true,
		is_standard: true,
		specify: false,
		label_ids: [],
		detail: "",
		transfer: 1,
		purchase_relation:{
			purchase_type: 1,
			buyer_id: "",
			supply_id: "",
		}
	},
};

export default {
	components: {
		Editor,
	},
	filters: {
		unit(id, arry) {
			if (arry.unit) {
				let name = "";
				arry.unit.forEach((e) => {
					if (e.id == id) {
						name = e.title;
					}
				});
				return name;
			}
		},
	},
	data() {
		return {
			// SKU列表数据
			monitorForm: {
				list: [
					{
						base: 1,
						spu_name: "",
						unit: "",
						package_num: 1,
						transfer_unit: "",
						transfer_num: 0,
						is_float: true,
						standard_spu_id: 0,
						standard_spu_code: "",
						down: false,
						goods_spu_code: "",
						market_price: "",
						purchase_price: "",
						minimum: "",
						attrition_rate: "",
						status: true,
					},
				],
				// 搜索
				form: {
					name: "",
					byname: "",
					category_id: [],
					pid: "",
					pinyin: "",
					goods_code: "",
					brand: "",
					pics: [],
					pic: "",
					sort: 0,
					describe: "",
					status: true,
					use_byname: false,
					use_code: [0],
					standard_goods_id: 0,
					standard_code: "",
					is_recommend: true,
					is_standard: true,
					specify: false,
					label_ids: [],
					detail: "",
					transfer: 1,
					purchase_relation:{
						purchase_type: 1,
						buyer_id: "",
						supply_id: "",
					}
				},
			},
			// 初始列表数据
			inlist: [
				{
					base: 1,
					spu_name: "",
					unit: "",
					package_num: 1,
					transfer_unit: "",
					transfer_num: 0,
					is_float: true,
					standard_spu_id: 0,
					standard_spu_code: "",
					down: false,
					goods_spu_code: "",
					market_price: "",
					purchase_price: "",
					minimum: "",
					attrition_rate: "",
					status: true,
				},
			],
			// 富文本
			init,
			// 验证
			rules,
			// 上传图片
			filelist: [],
			uploadPath,
			dialogImageUrl: "",
			dialogVisible: false,
			// 分类
			options: [],
			defaultProps: {
				children: "selfNext",
				label: "title",
				value: "id",
			},
			// 信息
			info: {},
			// id
			id: this.$route.params.id,
			// 监听滚动
			searchBarFixed: false,
		};
	},
	mounted() {
		window.addEventListener("scroll", this.handleScroll);
	},
	destroyed() {
		window.removeEventListener("scroll", this.handleScroll);
	},
	created() {
		// 下拉信息
		this.goods_base();
		// 基本信息
		this.goods_info();
	},
	methods: {
		// 监听滚动
		handleScroll() {
			let scrollTop =
				window.pageYOffset ||
				document.documentElement.scrollTop ||
				document.body.scrollTop;
			scrollTop + document.documentElement.clientHeight >
			document.getElementById("newConBox").offsetTop + 300
				? (this.searchBarFixed = false)
				: (this.searchBarFixed = true);
		},
		// 标准编码
		checkboxGroup(val) {
			this.monitorForm.form.use_code = [];
			this.monitorForm.form.use_code.push(val);
		},
		// 获取首字母
		inputName(val) {
			let gs = vPinyin.chineseToPinYin(val);
			let SX = "";
			let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
			if (!/^(\d+\.?)?\d{0,2}$/.test(gs)) {
				if (reg.test(val)) {
					for (var i = 0; i < gs.length; i++) {
						var c = gs.charAt(i);
						if (/^[A-Z]+$/.test(c)) {
							SX += c;
						}
					}
				} else {
					for (var i = 0; i < gs.length; i++) {
						var c = gs.charAt(i);
						SX += c.toUpperCase();
					}
				}
			}
			this.monitorForm.form.pinyin = SX;
		},
		// 取消展开行
		toogleExpand_qx(row, index) {
			let $table = this.$refs.multipleTable;
			this.monitorForm.list[index].down = false;
			$table.toggleRowExpansion(row, false);
		},
		// 展开行
		toogleExpand(row, index) {
			let $table = this.$refs.multipleTable;
			this.monitorForm.list[index].down = !this.monitorForm.list[index].down;
			this.monitorForm.list.map((item) => {
				if (item.down) {
					$table.toggleRowExpansion(item, true);
				} else {
					$table.toggleRowExpansion(item, false);
				}
			});
		},
		// SKU设置
		radioGrou(val) {
			this.monitorForm.list = JSON.parse(JSON.stringify(this.inlist));
		},
		// SKU设置-加
		plus() {
			let $table = this.$refs.multipleTable;
			this.monitorForm.list.push(JSON.parse(JSON.stringify(shuju.list)));
			this.inlist.push(JSON.parse(JSON.stringify(shuju.list)));
			this.$nextTick(() => {
				this.monitorForm.list.map((item) => {
					if (item.down) {
						$table.toggleRowExpansion(item, true);
					} else {
						$table.toggleRowExpansion(item, false);
					}
				});
			});
		},
		// SKU设置-减
		reduce(index, type) {
			let $table = this.$refs.multipleTable;
			if (type) {
				this.delet(index, type);
			} else {
				this.monitorForm.list.splice(index, 1);
				this.inlist.splice(index, 1);
			}
			this.$nextTick(() => {
				this.monitorForm.list.map((item) => {
					if (item.down) {
						$table.toggleRowExpansion(item, true);
					} else {
						$table.toggleRowExpansion(item, false);
					}
				});
			});
		},
		// 删除
		delet(index, type) {
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(
							Object.assign(apiUrl().name, {
								id: this.monitorForm.list[index].id,
								type: type,
							})
						) + apiUrl().appsecret
					),
				},
				apiUrl().name,
				{ id: this.monitorForm.list[index].id, type: type }
			);
			goods_delete(data).then((res) => {
				if (res.errcode == 0) {
					this.monitorForm.list.splice(index, 1);
					this.inlist.splice(index, 1);
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},
		// 采购价？注释
		renderHeader(h, { column, $index }) {
			// 这里在最外层插入一个div标签
			return h("div", [
				// h即为cerateElement的简写
				// 在div里面插入span
				h("span", {
					// 表示内容
					domProps: {
						innerHTML: column.label,
					},
					on: {
						click: () => {
							// console.log(`${column.label}   ${$index}`);
						},
					},
				}),
				h(
					"el-tooltip",
					{
						// 表示属性
						attrs: {
							effect: "dark",
							content: "最近一次",
							placement: "top",
						},
					},
					[
						h("i", {
							style: "margin-left: 5px;margin-top:-1px;",
							class: "el-icon-question table-msg",
						}),
					]
				),
			]);
		},
		// 损耗率？注释
		renderHeader1(h, { column, $index }) {
			// 这里在最外层插入一个div标签
			return h("div", [
				// h即为cerateElement的简写
				// 在div里面插入span
				h("span", {
					// 表示内容
					domProps: {
						innerHTML: column.label,
					},
					on: {
						click: () => {
							// console.log(`${column.label}   ${$index}`);
						},
					},
				}),
				h(
					"el-tooltip",
					{
						// 表示属性
						attrs: {
							effect: "dark",
							content: "最近一次",
							placement: "top",
						},
					},
					[
						h("i", {
							style: "margin-left: 5px;margin-top:-1px;",
							class: "el-icon-question table-msg",
						}),
					]
				),
			]);
		},
		// 上传图片-删除
		handleRemove(file) {
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name, { id: file.id })) +
							apiUrl().appsecret
					),
				},
				apiUrl().name,
				{ id: file.id }
			);
			images_delete(data).then((res) => {
				if (res.errcode == 0) {
					const i = this.monitorForm.form.pics.findIndex(
						(item) => item.path == file.path
					);
					this.monitorForm.form.pics.splice(i, 1);
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},
		// 上传图片-删除
		beforeRemove(file, fileList) {
			let a = true;
			if (file && file.status === "success") {
				a = this.$confirm("确定删除图片？");
			}
			return a;
		},
		// 上传图片-查看
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		// 上传图片-成功
		handSuccess(res, file, fileList) {
			// console.log(res, file, fileList);
			this.monitorForm.form.pics.push({
				name: "",
				path: res.path,
				url: res.src,
			});
		},
		// 保存
		preservation(id) {
			this.$refs["userListFrom"].validate((valid) => {
				if (valid) {
					let arry = JSON.parse(JSON.stringify(this.monitorForm.form));
					let sz = JSON.parse(JSON.stringify(this.monitorForm.list));
					let list = sz.map((a) => {
						a.transfer_unit = a.transfer_unit ? a.transfer_unit : 0;
						let { down, standard_goods_id, ...sz } = a;
						return { ...sz };
					});
					arry.use_code = arry.use_code[0];
					arry.specify = arry.specify ? 1 : 0;
					arry.status = arry.status ? 1 : 0;
					arry.use_byname = arry.use_byname ? 1 : 0;
					arry.is_recommend = arry.is_recommend ? 1 : 0;
					arry.is_standard = arry.is_standard ? 1 : 0;
					arry.pid = arry.category_id[0];
					arry.purchase_relation.buyer_id = arry.purchase_relation.buyer_id?arry.purchase_relation.buyer_id:0;
					arry.purchase_relation.supply_id = arry.purchase_relation.supply_id?arry.purchase_relation.supply_id:0;
					arry.category_id = category(arry.category_id);
					arry.label_ids =
						arry.label_ids.length != 0 ? arry.label_ids.join(",") : "";
					arry.pic = arry.pics[0] ? arry.pics[0].path : "";
					arry.pics =
						arry.pics.length != 0 ? arry.pics.map((p) => p.path).join(",") : "";
					arry.purchase_relation=JSON.stringify(arry.purchase_relation)
					let data = Object.assign(
						{
							sign: Md5(
								objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
									apiUrl().appsecret
							),
						},
						apiUrl().name,
						arry,
						{ list: JSON.stringify(list), id: this.id }
					);
					goods_edit(data).then((res) => {
						if (res.errcode == 0) {
							this.$message({
								message: "修改成功",
								type: "success",
							});
							if (id == 2) {
								this.$router.go(-1);
							}
						} else {
							this.$message.error(res.errmsg);
						}
					});
				}
			});
		},
		// 下拉信息
		goods_base() {
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
					),
				},
				apiUrl().name
			);
			goods_base(data).then((res) => {
				if (res.errcode == 0) {
					this.options = recursion(res.data.category);
					this.info = res.data;
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},
		// 基本信息
		goods_info() {
			let data = Object.assign(
				{
					sign: Md5(
						objKeySort(Object.assign(apiUrl().name, { id: this.id })) +
							apiUrl().appsecret
					),
				},
				apiUrl().name,
				{ id: this.id }
			);
			goods_info(data).then((res) => {
				if (res.errcode == 0) {
					this.standard(res.data);
				} else {
					this.$message.error(res.errmsg);
				}
			});
		},
		standard(data, type) {
			let arry = [];
			let use_code = [];
			use_code.push(parseInt(data.info.use_code));
			data.info.spu.map((e) => {
				e.status = e.status == 1 ? true : false;
				e.spu_name = parseInt(e.spu_name);
				e.transfer_unit = e.transfer_unit ? parseInt(e.transfer_unit) : "";

				e.down = false;
			});
			data.info.images.forEach((a) => {
				arry.push({
					name: "",
					path: a.path,
					url: data.domain + a.path,
					id: a.id,
				});
			});
			this.monitorForm.form.use_code = use_code;
			this.monitorForm.form.name = data.info.name;
			this.monitorForm.form.byname = data.info.byname;
			this.monitorForm.form.category_id = [
				data.info.pid,
				data.info.category_id,
			];
			this.monitorForm.form.pid = data.info.pid;
			this.monitorForm.form.pinyin = data.info.pinyin;
			this.monitorForm.form.goods_code = data.info.goods_code;
			this.monitorForm.form.brand = parseInt(data.info.brand);
			if(data.info.purchase_relation.length!=0){
				this.monitorForm.form.purchase_relation.purchase_type = parseInt(data.info.purchase_relation[0].bind_type);
				this.monitorForm.form.purchase_relation.buyer_id = data.info.purchase_relation[0].buyer_id == 0 ? "" : parseInt(data.info.purchase_relation[0].buyer_id);
				this.monitorForm.form.purchase_relation.supply_id = data.info.purchase_relation[0].supplier_id == 0 ? "" : parseInt(data.info.purchase_relation[0].supplier_id);
			}
			this.monitorForm.form.pics = JSON.parse(JSON.stringify(arry));
			this.filelist = JSON.parse(JSON.stringify(arry));
			this.monitorForm.form.pic = data.info.pic;
			this.monitorForm.form.sort = data.info.sort;
			this.monitorForm.form.describe = data.info.describe;
			this.monitorForm.form.specify = data.info.specify == 1 ? true : false;
			this.monitorForm.form.status = data.info.status == 1 ? true : false;
			this.monitorForm.form.is_recommend =
				data.info.is_recommend == 1 ? true : false;
			this.monitorForm.form.is_standard =
				data.info.is_standard == 1 ? true : false;
			this.monitorForm.form.use_byname =
				data.info.use_byname == 1 ? true : false;
			this.monitorForm.form.label_ids = data.info.label_ids
				? data.info.label_ids.split(",").map((e) => parseInt(e))
				: [];
			this.monitorForm.form.transfer = data.info.transfer;
			this.monitorForm.list = JSON.parse(JSON.stringify(data.info.spu));
			this.inlist = JSON.parse(JSON.stringify(data.info.spu));
			this.monitorForm.form.detail = data.info.detail;
			this.monitorForm.form.standard_goods_id = data.info.standard_goods_id;
			this.monitorForm.form.standard_code = data.info.standard_code;
		},
	},
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.maincla_form {
	/deep/.el-table .cell .el-table__expand-icon {
		display: none;
	}
	margin-left: 10px;
	margin-top: 10px;
	/deep/.el-form-item--mini.el-form-item,
	/deep/.el-form-item--small.el-form-item {
		margin-bottom: 22px;
	}
	.label_ids {
		display: block;
		/deep/.el-form-item__content {
			width: 85%;
		}
	}
	.maincla_lea {
		font-size: 0;
		span {
			min-width: 70px;
			padding-left: 10px;
			padding-right: 10px;
			height: 32px;
			line-height: 30px;
			display: inline-block;
			vertical-align: middle;
			align-items: center;
			text-align: center;
			font-size: $font_14;
			color: $colour_3;
			border: 1px solid $subActive;
			&:hover {
				cursor: pointer;
			}
			&.on {
				border-color: $menuActiveText;
				color: $menuActiveText;
			}
		}
	}
	.main_tile {
		margin-left: -10px;
	}
	.maincla_te {
		width: 59.7%;
		/deep/.el-form-item__content {
			width: calc(100% - 110px);
		}
	}
	.maincla_ed {
		margin-top: 20px;
		margin-left: 10px;
		width: 66%;
	}
	.maincla_ra {
		margin-top: 4px;
		margin-left: 30px;
		/deep/.el-radio {
			margin-right: 15px;
		}
	}
	.main_table {
		/deep/.el-table--small td {
			padding-top: 0;
		}
		/deep/.el-form-item--small.el-form-item {
			margin-bottom: 16px;
			margin-top: 16px;
			margin-right: 0;
		}
		.maincla_sx {
			.maincla_sxf {
				margin-right: 15px;
				margin-left: 10px;
				margin-top: 2px;
				svg {
					display: block;
					&:nth-child(2) {
						margin-left: -4px;
						margin-top: 5px;
					}
					&:hover {
						cursor: pointer;
					}
				}
				use {
					fill: #c1c1c1ff;
				}
			}
			.maincla_sxs {
				width: 80px;
				margin-right: 20px;
				color: $colour_3;
			}
		}
		.maincla_dw {
			.maincla_dwp {
				.maincla_dwp_un {
					min-width: 90px;
					text-align: left;
					margin-right: 10px;
				}
				.wid110 /deep/.el-input__inner {
					width: 90px;
					padding-left: 0px;
				}
				/deep/.el-select .el-input .el-select__caret {
					font-weight: bold;
					color: $colour_3;
				}
				/deep/.el-input__inner {
					border: 0;
					background: none;
				}
				strong {
					width: 40px;
					line-height: 16px;
					display: inline-block;
					vertical-align: middle;
					color: $menuActiveText;
					margin-left: -7px;
				}
				&:hover {
					cursor: pointer;
					& strong {
						text-decoration: underline;
					}
				}
			}
			p {
				i {
					font-size: 18px;
					color: $menuText;
				}
			}
		}
		.maincla_bz {
			input {
				margin-right: 5px;
			}
		}
		/deep/.el-table tr.down td {
			border-bottom: 0;
		}
		.maincla_zh {
			margin-left: 517px;
			margin-bottom: 5px;
			margin-top: 10px;
			align-items: center;
			& > span {
				margin-right: 5px;
			}
			/deep/.el-select--small {
				margin-left: 5px;
			}
			p {
				color: $colour_red;
				margin-left: 10px;
				&:hover {
					cursor: pointer;
				}
			}
		}
	}
}
</style>
